<template>
    <div class="reappearance">

      <div class="reappearanceDiv">
        <div class="ones">
          积分返现余额
          <p>￥{{jffxye}}</p>
        </div>
      </div>

      <div class="reappearance-textContent">
        <van-list
          v-model="loading"
          :finished="finished"
          @load="getData"
        >
          <div v-if="typeof lis=='string'" class="listDatasno" >{{lis}}</div>
          <div v-else v-for="(v,idx) in lis" :key="idx" class="listDatas" >
            <van-row>
              <van-col v-if="v.remark.length==0" span="16" style="padding:5px 10px;text-align: left;color:#ddd">
                暂无备注信息
              </van-col>
              <van-col v-else span="16" style="padding:5px 10px;text-align: left;">
                备注:{{v.remark}}
              </van-col>

              <van-col v-if="v.pays<0" span="8" class="b-lists-money">
                {{v.pays}}元
              </van-col>
              <van-col v-else span="8" class="b-lists-money2">
                {{v.pays}}元
              </van-col>
            </van-row>
            <van-row>
              <van-col span="24" class="b-lists-time">{{v.created_at}}</van-col>
            </van-row>
          </div>
          <div class="noDatas" :style="{display:block}">
            数据已加载完
          </div>
        </van-list>
      </div>

      <!--返回按钮-->
      <van-button class="reappearance-back" @click="onClickLeft">
        <i class="iconfont icon-icon_reply" style="display: block"></i>
        返回
      </van-button>

    </div>
</template>

<script type="text/javascript">
  import { mapState } from 'vuex';

    export default {
        name: "reappearance",
        data(){
          return {
            block:"none",
            currentPage:1,
            lis:[],
            pagesize:10,
            page:0,
            Totals:0,
            jffxye:0,

            loading: false,
            finished: false,
          }
        },
        computed: {
          ...mapState({
            memberDetails:"data"
          })
        },
        methods:{
          //判断是否开通积分返现余额功能
          getMemberStatus(){
            this.$http.setting.get('/marke/statusall')
              .then((response)=>{
                // console.log(response.data.data)
                if(!response.data.data.jffx){
                  this.$router.push({name: 'memberDetails',params:{
                      url:this.$store.state.data.path,
                      vipId:this.$store.state.data.memberID
                    }});
                }

              })
              .catch(function (error) {
                console.log(error);
              });
          },
          //获取数据
          getData(){
            var $this=this;
            this.$http.member.get('/fanxian/oneVipFanxianWx',{
              params:{
                vip_id:$this.$store.state.data.memberID,
                page:$this.currentPage,
                pageSize:$this.pagesize,
                // start_time: '2018-11-01 00:00:00',
                // end_time: '2018-11-30 23:59:59'
              }
            })
              .then(function (response) {

                // console.log(response.data);
                $this.currentPage=response.data.data.current_page+1;//获取当前的下一页
                var objs=response.data.data.data;
                for(var i=0;i<objs.length;i++){
                  if(objs[i].pay>0){
                    objs[i].pays="+"+objs[i].pay;
                  }else if(objs[i].pay<0){
                    objs[i].pays=objs[i].pay;
                  }

                  $this.lis.push(objs[i]);

                }

                $this.loading = false;
                if(!objs.length){
                  $this.lis="暂无记录";
                  $this.finished = true;
                }else if ($this.lis.length >= response.data.data.total) {
                  $this.finished = true;
                  $this.block = 'block'
                }


              })
              .catch(function (error) {
                console.log(error);
              });


            this.$http.member.get('/fanxian/'+this.$store.state.data.memberID+'/lastRecord')
              .then(function (response) {
                $this.jffxye=response.data.data;
              })
              .catch(function (error) {
                console.log(error);
              });

          },
          onClickLeft() {
            this.$router.push({name: 'memberDetails',params:{
                url:this.$store.state.data.path,
                vipId:this.$store.state.data.memberID
              }});
          }
        },
        beforeMount(){
          this.getMemberStatus();
        },
        mounted(){
        }
    }
</script>

<style scoped>
  .reappearanceDiv{
    display: flex;
    padding:10px 0;
    background-color: #0D90EB;
    position: fixed;
    top:0;
    left:0;
    width:100%;
  }
  .reappearance-textContent{
    margin-top:82px;
  }
  .reappearanceDiv>.ones{
    width:100%;
    color:#fff;
    font-size:16px;
    font-weight: bold;
  }
  .reappearanceDiv>.ones p{
    margin:5px;
  }

  .reappearanceDiv .textContent{
    margin-bottom: 40px;
  }
  .reappearance-back{
    position: fixed!important;
    bottom:100px!important;
    right:10px!important;
    background:rgba(0,0,0,.5)!important;
    width:55px!important;
    height:auto!important;
    color:#fff!important;
    font-size:12px!important;
    padding:12px 0!important;
    border-radius: 5px!important;
    line-height: initial!important;
    border:0!important;
  }
  .reappearance-back .iconfont{
    font-size:12px;
  }
  .van-cell__title {
    text-align: left;
  }

  .footerPagess{
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    background: #fff;
  }
  .b-lists{
    font-size:12px;color:#666
  }
  .b-lists-money{
    color:#01A761;font-size:16px;font-weight: bold;padding:5px 0;
  }
  .b-lists-money2{
    color:red;font-size:16px;font-weight: bold;padding:5px 0;
  }
  .b-lists-time{
    padding:3px 10px;text-align: left;font-size:12px;
  }
  .listDatas{
    padding:5px 0;font-size:16px;border-bottom:1px solid #ddd;background: #fff;
  }
  .listDatasno{
    color:#ddd;font-size:14px;padding:10px 0;
  }
</style>
